<!-- 网关管理 -->
<template>
  <!--  v-userAuth="'E9'" -->
  <div>
    <!-- v-showNoAuth="'E11-1'" -->
    <!-- <NoAuthPage :imgBoxStyle="{height:'40vh',margin:'0 10px 10px'}" /> -->
    <a-row>
      <a-row class='mytitle'>
        <!-- <i class="icon icon-eventlog16l title-icon-style"></i> -->
        {{ $t('Gateway-manage') }}
      </a-row>
      <a-card hoverable style="margin:1em">
        <div style="margin-bottom:15px">
          <!-- v-userAuth="'E11-2'" -->
          <a-button type="primary" @click="handleAddGateway">
            <!-- <i class="icon icon-new16f button-icon-style"></i> -->
            <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
            {{ $t('Add') }}
          </a-button>
        </div>
        <a-table :columns="columns" :dataSource="tableData" :loading="tableLoading" size='small' bordered
          :pagination="pagination" :rowKey="(record) => record.xxx" :locale="defaultSetting">
          <!-- :rowSelection='{selectedRowKeys:selectedRowKeys,onChange:onSelectChange}'  -->
          <template slot="state" slot-scope="text, record">
            <!-- 正常 -->
            <div>
              <span class="green-circle"></span><span>{{ $t('Normal') }}</span>
            </div>
            <!-- 异常 -->
            <div>
              <span class="red-circle"></span><span>{{ $t('Abnormal') }}</span>
            </div>
          </template>
          <template slot="operation" slot-scope="text, record">
            <!-- 编辑 -->
            <!-- v-userAuth="'D4-3'" -->
            <a-tooltip placement='top'>
              <template slot='title'>
                <span>{{ $t('Edit') }}</span>
              </template>
              <!-- <i 
                class="icon icon-edit16f table-operation-icon"
                @click="editGateWay(record)"
              ></i> -->
              <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="editGateWay(record)"></Iconfont>
            </a-tooltip>
            <!-- 删除 -->
            <!-- v-userAuth="'D4-3'" -->
            <a-tooltip placement='top'>
              <template slot='title'>
                <span>{{ $t('Delete') }}</span>
              </template>
              <!-- <i 
                class="icon icon-delete16f table-operation-icon"
                @click="deleteGateway(record)"
              ></i> -->
              <Iconfont class="icon table-operation-icon" type="icon-delete16f" @click="deleteGateway(record)"></Iconfont>
            </a-tooltip>
          </template>
        </a-table>
      </a-card>
    </a-row>

    <!-- 新增网关 -->
    <AddGateway :visible="addGatewayModal" @closeOperateModal="closeOperateModal" />

    <!-- 编辑网关 -->
    <EditGateway :visible="editGatewayModal" :targetGateway="targetGateway" @closeOperateModal="closeOperateModal" />

    <!-- 删除网关 -->
    <DeleteGateway :visible="delGatewayModal" @closeOperateModal="closeOperateModal" />
  </div>
</template>

<script>
import NoAuthPage from '@/components/common/NoAuthPage'
import EmptyData from '@/components/common/EmptyData'
import AddGateway from '@/views/storage_mgr/gatewayManage/operate/AddGateway'
import EditGateway from '@/views/storage_mgr/gatewayManage/operate/EditGateway'
import DeleteGateway from '@/views/storage_mgr/gatewayManage/operate/DeleteGateway'

export default {
  name: "GateWayManage",
  components: { NoAuthPage, EmptyData, AddGateway, EditGateway, DeleteGateway },
  data() {
    return {
      addGatewayModal: false,
      editGatewayModal: false,
      delGatewayModal: false,
      tableData: [
        { host: '111' },
        { host: '111' },
        { host: '111' },
      ],
      columns: [
        // 所属主机
        { title: this.$t('Belong-host'), dataIndex: 'host', key: 'host', ellipsis: true, },
        // 管理网IP
        { title: this.$t('Manage-net-ip'), dataIndex: 'manage_ip', key: 'manage_ip', ellipsis: true, },
        // 状态
        { title: this.$t('Status'), dataIndex: 'state', key: 'state', ellipsis: true, scopedSlots: { customRender: 'state' }, },
        // iSCSI计入点
        { title: this.$t('ISCSI-credits'), dataIndex: 'iscsi_ip', key: 'iscsi_ip', ellipsis: true, },
        // 操作
        { title: this.$t('Operate'), key: 'operate', scopedSlots: { customRender: 'operation' }, },
      ],
      tableLoading: false,
      pagination: {
        defaultPageSize: 5,
        showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15'],
        onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
        buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
      },
      defaultSetting: { emptyText: <EmptyData /> },
      targetGateway: {},
      modalType: new Map([
        ['add-gateway', () => { this.addGatewayModal = false; }],
        ['edit-gateway', () => { this.editGatewayModal = false; }],
        ['del-gateway', () => { this.delGatewayModal = false; }],
      ]),
    }
  },
  methods: {
    //打开新增网关
    handleAddGateway() {
      this.addGatewayModal = true;
    },

    //编辑网关
    editGateWay(record) {
      this.targetGateway = record;
      this.editGatewayModal = true;
    },

    //删除网关
    deleteGateway(record) {
      this.targetGateway = record;
      this.delGatewayModal = true;
    },

    //关闭操作弹窗
    closeOperateModal(type) {
      const action = this.modalType.get(type);
      action.call(this);
    },
  },
}
</script>